

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body {font-size: 13px; font-family: 'Segoe UI','arial'; background-color: #f9f9f9;}

input.pass_pot{display: none}

hr {border-bottom: none}

form.full {
    width: 90%; 
    margin:0 auto;
}

form.login-dropdown {min-width: 350px;margin: 5px 0;}
form.login-dropdown input{height:30px; padding: 4.2px 8.1px; }

form.full input[type="text"],form.full input[type="password"], form.full textarea {
    width: 90%;
    height: 4%;
}

form.full-message input[type="text"] {
    height: 10%;
}

form.full input {
    margin-bottom:15px;
}

ul.shadow-hover li:hover{-webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.15);
                         -moz-box-shadow:    0px 0px 8px rgba(50, 50, 50, 0.15);
                         box-shadow:         0px 0px 8px rgba(50, 50, 50, 0.15);
                         transition: box-shadow 400ms linear;
                         -webkit-transition: box-shadow 400ms linear;
}  
ul.shadow-hover li{
    box-shadow:         none;
    transition: box-shadow 200ms linear;
    -webkit-transition: box-shadow 400ms linear;
}  

form.search {margin: 0;
             padding: 5px;
             width: 290px;}
form.search input{ background-color: white;
                   margin: 1.8px 0 2.6px;
                   padding: 5px 10px;
                   width: 90%;
                   height: 33px;
}

.search-container {height: 48.1px;
                   position: relative;
                   width: 248.9px;}
.search{position: absolute;
        right: -38.4px;}

form.login-dropdown{
    color:#878787
}

.navbar { margin:3% auto}

.navigation-container {border-bottom: 1px solid #DCDBDB;background-color: #fff;}
.is-sticky .donker {background: #031630 ;  }
.donker {min-height: 50px; background-color: #031630; color:#fff;}
.donker a{color:#fff}
.donker-navigation {padding-top:12px}
.donker ul.no-style.inline li{float:left; margin-right: 3%}
.donker-box{
    position: relative; 
    min-width: 50px;
    height: 50px;
    -o-transition:color .1s ease-out, background .5s ease-in;
    -ms-transition:color .1s ease-out, background .5s ease-in;
    -moz-transition:color .1s ease-out, background .5s ease-in;
    -webkit-transition:color .1s ease-out, background .5s ease-in;
    cursor: pointer
}

.masonry-item{}
.masonry-item-half{}

.donker-box.donker-center{position:absolute;left:48.3%; width: 2.5%;top:20%}

.share-container{
    height: 24px;
    position: absolute;
    text-align: center;
    z-index: 9;
    width: 100%;
}

.share-button{
    background: url("../img/share-icon.png") no-repeat scroll 100% center transparent;
    cursor: pointer;
    height: 24px;
    width: 24px;
    position: absolute;
    right: 0;
    top:0;
    z-index: 11;
}

.loading-bottom{ 
    position: fixed;
    z-index:100;
    bottom:0;
    right: 47%;
    display:block;
    padding:5px 10px;
    opacity:0;
}

.feedback-trigger{
    position: fixed;
    z-index:100;
    bottom:0;
    right: 0;
    display:block;
    padding:5px 10px;
    background:rgba(0,0,0,.1);
}
#modalfeedback{
    background:rgba(255,255,255,0.8);
    padding:10px 20px;
    margin:0;
    display: none;

}
.feedback-trigger a{
    color:#F77300
}



#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}
.node-image{text-align: center;z-index: 10;}
img{}


.left-side ul.no-style li{margin:0}

.stickybar{z-index: 100}
.sticky-wrapper .sticked-sidebar{padding-top:50px;z-index: 99}
.stickynav {opacity:0;display:none}
.is-sticky .stickynav {display:block;}
.sign-up-icon {
    background-image: url("../img/sign-up-icon.png");
    min-height: 28px; width: 158px;text-indent: -9999px;
    display:block;
}

.sign-up-icon.facebook{ background-position: 0 0px; }
.sign-up-icon.twitter{ background-position: 0 28px; }
.text-center{text-align: center}
.scroll-top{
    background: none repeat scroll 0 0 #031630;
    bottom: 0;
    color: #F5F4F4;
    left: 0;
    min-height: 25.4px;
    min-width: 20px;
    padding: 10.0px 15px 8px 10px;
    position: fixed;
    z-index: 100;
    cursor: pointer;
}



.share-container .share-item{ float: right; padding:10px 10px 3px 0; display:none;opacity:0}

.share-container .twitter-share-button { padding-right:0px; width: 90px}

.pan-container{overflow:hidden;
               position:relative}
.pan-container.diatra{min-height: 60px;}
.pan-container.redaksi{min-height: 230px;}

.pan-area a:hover{border:none;} 
.pan-area{width: 100%;}
.pan-area img{width: 100%}
.pan-label{background:#f67000;position:absolute;bottom:0;width: 100%;z-index: 11;text-align: center;}
.pan-label a{color:#fff}
.donker-box.facebook:hover{background-color: #3b5998;}
.donker-box.twitter:hover{background-color: #1dcaff;}
.donker-box.box-icon-orange:hover{background-color: #f67000;}
.donker-box.box-icon-blue{background-color: #2f486a;}
.donker-box.box-icon-blue-hover.active{background-color: #2f486a;}
.donker-box.box-icon-blue-hover:hover{background-color: #2f486a;}

.donker-box-child{display:block; position: absolute;
                  right: 0;
                  padding:5% 20px;
                  background-color: #2f486a;
                  opacity:0;
                  display: none;
}

.donker-box-child.left{
    left: 100%;
    right: auto;
}



.box-icon{height:100%; width: 100%;}
.box-icon-search {background: url('../img/search-box.png') no-repeat 50% 50%; width: 100%}
.box-icon-twitter {background: url('../img/box-twitter.png') no-repeat 50% 50%; width: 100%}
.box-icon-avatar {background: url('../img/avatar-logo.png') no-repeat 50% 50%; width: 100%}
.box-icon-facebook {background: url('../img/box-facebook.png') no-repeat 50% 50%; width: 100%}
.box-icon-signup {background: url('../img/add-user.png') no-repeat 5% 50%; width: 100%}
.box-icon-login {background: url('../img/login.png') no-repeat 5% 50%; width: 100%}
.box-icon-text {
    float: left;
    margin-left: 26.4px;
    margin-right: 18.7px;
    margin-top: 14px;
}

.nav.right {float: right}
.right {float: right}

[class^="iconbig-"], [class*="iconbig-"] {
    background-image: url("../img/glyphicons-halflings.png");
    background-position: 14px 14px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 14px;
    line-height: 14px;
    margin-top: 1px;
    vertical-align: text-top;
    width: 14px;
}

[class^="iconbig-"], [class*=" iconbig-"] {
    height: 30px;
    width: 30px;
}



.category {
    /*border-bottom: 1px solid #DCDBDB;*/
    min-height: 48.5px;
    padding-top: 13.5px;
}

.category ul.inline li{
    border: none;
}

.brand{width: 100%}
h1,h2,h3{font-family: 'Segoe UI',serif; }
h2{ font-size: 1.6em; font-weight: normal;margin-bottom: 0; text-align: center}
/*.left-side h2{border-bottom: 1px solid #DCDBDB; }*/
h3 {font-size: 1.2em;line-height: 1.4; font-weight: normal;}
h3 a{color: #01122c;}
h2.orange{color: #ff6d00; text-transform: capitalize;text-align: left}
.orange a{color: #ff6d00;}
p {font-size: 1.1em; color:#3D3D3D;  font-weight: 500}
.metadata {font-size: .85em; color:grey;margin-bottom: 0px;}
.link {font-size: .85em; color:#bebebe;margin-bottom: 10px;}
.link a, .right-side .link a{color:#bebebe; text-decoration: none}
a:hover{text-decoration: none}
ul.no-style {list-style: none;margin:0}
ul.no-style li {}


.main {margin:1% auto}
.member h3{color:#f77300;}

.ruang-pamer h3,.recent-blog h3  {margin-top:0; margin-bottom: 5px}
.ruang-pamer ul.no-style li,.komentar ul.no-style li {}
.recent-blog a{font-weight: normal;text-transform: capitalize; color:grey}
ul.no-style.cipta-item li{ margin: 30px 0;}
ul.no-style.detail-node{ margin: 16px 0;} 
ul.no-style.masonry li{ margin: 0.64%;}
.left-side ul.detail-node li { margin-top: 0;}
.left-side .artikel p {margin-top:5px}
.sidebar-separator{ 
    margin: 15.3px 0;
}



.detail-node{font-size:1.1em;}
.detail-node p{line-height: 1.5}
.right-side{font-family: 'Segoe UI', serif;height: auto}
.right-side .circle-pics img {border-radius: 30px}
.content_lists p {margin-top:10px}
.content_lists li {background: #fff; border: 1px solid #F3F2F2; border-bottom:1px solid #F0EFEF; position: relative }
.content_lists.list-white{background: #fff; border: 1px solid #F0EFEF; border-bottom:1px solid #F0EFEF; }
.content_lists.list-orange {background: #f67000; color:#fff}
.content_lists .white-background {background: #fff; color:#3D3D3D}

.content_lists_content{padding: 10px 15px; z-index: 10;}

.calendar-container{margin-top: 12px;text-align: right}
.calendar-date{ font-size: 0.85em;
                line-height: 1.3;}
.calendar-day{font-size: 1.3em}
.content_lists_subcontent{min-height: 15px; color: #ff6d00; font-size: .85em; text-align: right; background-color: #e9e9e9;padding: 5px 10px; }
.content_lists_subcontent a {color: grey;}
.content_lists_subcontent a:hover{color: #F77300}
.content_lists_subcontent {position: relative}
.content_lists_separator {
    background-color: #F0EFEF;
    height: 1px;
    margin: 15.3px 0;
}
.navbar .nav {padding-top: 10px;margin:0}
.navbar {font-size: 1.1em; font-family: 'Segoe UI',serif;}
.metadata a {font-weight: bold; color: #f77300;margin-bottom: 5px}
.metadata-type {margin-top: 5px; }
.label-type{letter-spacing: 1px; text-shadow: none; font-weight: normal}
.label-type.puisi,.label-type.prosa,.label-type.drama,.label-type.karya{}
.label-type a {color:#f77300; text-transform: uppercase; font-size: .9em}

.comment-box  .metadata{position: relative}

.comment-box .triangle-css{
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #F2f7ff;
    height: 0;
    left: 10px;
    position: absolute;
    top: -10px;
    width: 0;
}

a.no-space{margin-right:-4px}
.rss-feeds-items li{
    list-style: none;
    border-bottom: 1px solid #F2f7ff;
    border-top: none;
    border-left: none;
    border-right: none;
    margin:20px 0;
    padding-bottom:20px;
}

.rss-feeds-items li:last-child{
    border: none;
}

.comment-box .content {}
.comment-box p {background-color:#F2f7ff; padding:15px 10px}

.komentar ul li {border-bottom: 1px dashed #c1c1c1;}

.row-fluid [class*="user-photo"] {margin-left: 0}

.left-side .separator { margin:28px 0}

/*.right-side a{color:#f77300;}*/
.right-side.join {margin-bottom: 10px }
.right-side-sub:first-child { margin-top:0}
.right-side-sub {  margin-top: 50px;}

.select2-container{min-width: 120px}
footer{background-color: #e6e6e6; color:#031630; padding:70px 0}
footer h2{font-size: 1em}
footer p{font-size: .857em}
footer ul.no-style {list-style: none;margin:0}
footer ul.no-style li { 
    border-bottom: 1px dashed #878787;
    margin-bottom: 3%;
    padding-bottom: 3%;}
footer ul.no-style.no-border li {margin-bottom: 5%; border-bottom: none}
footer a{color:#f77300;}

.sign-up-container{
    position: relative; height: 75px;overflow: hidden;background: url('../img/signdiatra.png') 100% 100% no-repeat; background-color:  #041531;
    -o-transition:color .1s ease-out, background .5s ease-in;
    -ms-transition:color .1s ease-out, background .5s ease-in;
    -moz-transition:color .1s ease-out, background .5s ease-in;
    -webkit-transition:color .1s ease-out, background .5s ease-in;


}   
.sign-up-container:hover{background-color: #f67000;}
.sign-up-text:hover{  color:#041531}
.sign-up-container a:hover{text-decoration: none;}

.sign-up-text{
    -o-transition:color .1s ease-out, background .5s ease-in;
    -ms-transition:color .1s ease-out, background .5s ease-in;
    -moz-transition:color .1s ease-out, background .5s ease-in;
    -webkit-transition:color .1s ease-out, background .5s ease-in;
    color: #FFFFFF;
    font-family: 'Segoe UI';
    text-align: center; 
    font-size: 1.4em;
    font-weight: 300;
    margin-top: 7.9%;
}   

.userbar {background: #fff; border: 1px solid #F3F2F2; }
ul.userbar-list { list-style: none; border-bottom: none; margin:6.5%}
.userbar h4{ font-size: 1em; color:#f77300}
.grey p{ color:#999999}
.grey b{ color:#041531}
.slim b{ font-weight: 100}
.small-font {font-size: .9em}
.user-socmed-icon{
    -o-transition:color .1s ease-out, background .5s ease-in;
    -ms-transition:color .1s ease-out, background .5s ease-in;
    -moz-transition:color .1s ease-out, background .5s ease-in;
    -webkit-transition:color .1s ease-out, background .5s ease-in;
}
.user-socmed-icon:hover{opacity:.7;

}


.paging a { font-size: 1em; color:#f77300; margin:0 10px; cursor:pointer}
.paging a.currentpage { font-weight: bold; cursor:auto;color:#622E03}
.paging-list img{width: 50%}
/*BOOTSTRAP OVERRIDE*/
.icon-facebook{
    background: url('../img/facebook.png') no-repeat;
}



.icon-twitter,.iconbig-twitter{
    background: url('../img/twitter.png') no-repeat;
}
.icon-socmed{ margin-left:10px }

.twitter-donker {
    background: url('../img/twitter-donker.png') no-repeat;
}

[class^="icon-"], [class*=" icon-"] {
    height: 20px;
    width: 20px;
}
.loading-img{
    opacity:0;
    height: 16px;
    width: 32px; 
    display:block;
    background: url('../img/ajax-loader.gif') no-repeat
}
/*CALENDAR OVERRIDE*/

.fc-widget-header, .fc-widget-content { 
    border: 1px solid #F5F4F4;
}
.fc-event-inner{ cursor: pointer}
.avatar-container img{padding:2px; background: #DCDBDB; width: 70%;}
.avatar-blog {margin-right: -2.3%}
.avatar-blog .avatar-container img{margin-top:26.2%}
.avatar-big img{width: 100%}

.scroll-container{
    overflow: hidden;
    position: relative;
}
form.full textarea.row-3{
    height:10%
}
.scroll-container .scroll-content{
    position: absolute;
    width: 97%;
}
.scroll-container .scroll-content .corner-box{
    width: 97%;
    display: block;
    position: relative
}
.dashboard-cipta.scroll-container{
    min-height: 400px;
}
.dashboard-add-button{
    padding-top: 0.6%;
}
#editable ul {list-style: none; margin:0; padding:0}
#disqus_thread {width: 99%}
.ps-container .ps-scrollbar-y {background-color: #F77300}
.copyright {font-size: .81em; color:#b7ada4; line-height: 1.5;text-align: center}
.copyright a{color:#ff6d00;}

img.filter-grayscale {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

/*responsip*/

/****** iPad (portrait) ******/
@media only screen and (min-width: 481px) and (max-width: 1023px) {

}


/* Blackberry Bold 9810 Landscape*/
@media only screen and (max-height: 480px) and (max-width:640px ){

}
/*blackberry playbook*/
@media only screen and (max-width: 650px) {
}

@media only screen and (max-width: 810px) {}

@media only screen and (max-width:767px){}

@media only screen and (max-width: 500px) {

    .scroll-top{display:none}
    .stickynav{display:none}

}
@media only screen and (max-width: 360px) {
}
.hover-container .avatar-big{
    z-index: 10;
}
img.avatar-big {
    width: 100%
} 
#redaksi{line-height: 1.6;}
.hover-container{
    position: absolute;
    height: 100%;
    top: 0;
    width: 100%;
    background-color : transparent;
    transition: background-color 500ms linear;
    -webkit-transition: background-color 500ms linear;
}
.hover-container.yellow-hover:hover{
    background-color: rgba(47,72,106,.8);
    transition: background-color 200ms linear;
    -webkit-transition: background-color 200ms linear;
    z-index: 12;
}
.redaksi-separator {
    margin:22px 0;
    width: 100%;
    height : 1px;
}
.redaksi-container p, .redaksi-container b, .redaksi-container i{
    color: transparent
}
.hover-container-text{position: relative;display: block; float:left;width: 90%; padding: 0 5%;  height: 100%;}
.redaksi-name{position:absolute;bottom:5%}
.redaksi-bio{position:absolute;top:5%;}
.redaksi-container:hover p, .redaksi-container:hover b,.redaksi-container:hover i{
    color: #fff;
    transition: color 800ms linear;
    -webkit-transition: color 800ms linear;
}
.redaksi-container{display: block;position:relative}
.form-kontak input[type=text] {width: 40%; height:30px; margin-right: 4%;background-color: #eeeeee;height: 45px;}
.form-kontak textarea {width: 84.4%; height: 120px;}
.form-kontak input[type=text],.form-kontak textarea {background-color: #eeeeee;border:none;margin-bottom: 3.4%;}


/*sprite*/
.sprite {display: block; background: transparent url('../img/sprite.png') no-repeat; text-indent: -10000px; }
.sprite.adduser { background-position: 0 0; width: 20px; height: 12px}
.sprite.avatar-logo { background-position: -22px 0; width: 29px; height: 29px}
.sprite.box-facebook { background-position: -53px 0; width: 12px; height: 24px}
.sprite.box-twitter { background-position: -67px 0; width: 23px; height: 20px}
.sprite.login { background-position: -92px 0; width: 22px; height: 12px}
.sprite.search-box { background-position: -116px 0; width: 22px; height: 22px}
.sprite.share-icon { background-position: -140px 0; width: 24px; height: 24px}
.sprite.signdiatra { background-position: -166px 0; width: 27px; height: 27px}